<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../../css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="../../css/main.css" />
        <style type="text/css">
            .chart {
                height: 200px;
                margin: 0px;
                padding: 0px;
            }
            h5 {
                margin-top: 30px;
                font-weight: bold;
            }
            h5:first-child {
                margin-top: 15px;
            }
            .mui-grid-view.mui-grid-9 {
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="mui-content">
            <!--医生介绍部分-->
            <div class="mui-row userInfoBox clearfix" id="userInfo">
                <div class="userImage">
                    <div class="userImageTop">
                        <img src="https://api.ctmingyi.net/Uploads/doctor.png" />
                    </div>
                </div>
                <div class='userInfo'>
                    <div class="userInfoPro">
                        <span class="name" </span>
                        <span class="postion"></span>
                    </div>
                    <div class="specialty">
                    </div>
                    <!-- <div class="userInfoDtl">
                        <h5>简介:</h5>
                        <p>从事骨科专业近20年，经过严格的大学本科骨科硕士和博士研究生学习，受教于中国工程院卢世璧院士，并经高级骨科医师训练班培训，具有扎实的专业理论和技能，主译和编辑专著四部，参加编译四部，发表专业论著三十余篇，现为骨科硕士研究生导师。</p>
                    </div> -->
                </div>
            </div>
            <!--4宫格-->
            <div class="foreDiv">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3 " id="doctorWork">
                        <a>
                            <img src="../../img/TWWZ.png " class="img-width " />
                            <div class="mui-media-body mui-title_ ">名医工作室</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3" id="photoDoctor">
                        <a>
                            <img src="../../img/MYZX.png " class="img-width " />
                            <div class="mui-media-body mui-title_ ">图文问诊</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3 " id="vocalDoctor">
                        <a>
                            <img src="../../img/YYWZ.png " class="img-width " />
                            <div class="mui-media-body mui-title_ ">语音问诊</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3 " id="littleClass">
                        <a>
                            <img src="../../img/JKSC.png" class="img-width " />
                            <div class="mui-media-body mui-title_ ">微课堂</div>
                        </a>
                    </li>
                </ul>
            </div>
            <!--我的粉丝-->
            <div class="myFans">
                <h4>我的粉丝:</h4>
                <!--<div class="myFansMore">
                    查看更多
                    <span class="mui-icon mui-icon-arrowright"></span>
                </div>-->
                <div class="mui-content-padded">
                    <h5>问诊类型</h5>
                    <div class="chart">
                        <div id="pieChart" style="width: 100%;height: 100%;"></div>
                    </div>
                    <h5>问诊次数</h5>
                    <div class="chart">
                        <div id="lineChart" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../../libs/echarts-all.js"></script>
        <script src="../../js/mui.min.js"></script>
        <script src="../../js/userInfo.js"></script>
        <script src="../../js/template.js"></script>
        <script id="userInfoTpl" type="text/html">
            <div class="userImage">
                <div class="userImageTop">
                    <img src="{{user.logo}}" />
                </div>
            </div>
            <div class='userInfo'>
                <div class="userInfoPro">
                    <span class="name">{{regdoctor.name}} </span>
                    <span class="postion"> {{regdoctor.job}}</span>
                </div>
                <div class="specialty">
                    {{each regdoctor.goodAtList}}
                        <span class="mui-badge mui-badge-primary">{{$value}}</span>
                    {{/each}}
                </div>
            </div>
        </script>
        <script type="text/javascript">
            var $ = mui, doc = document;
            $.plusReady(function() {
                initUserInfo();
            });


            // 刷新用户信息
            window.addEventListener('refreshInfo', function(){
                user.refresh();
                initUserInfo();
                alert();
            });
            // 初始化用户信息
            function initUserInfo() {
                var outHtml = template('userInfoTpl', userInfo);
                $("#userInfo")[0].innerHTML = outHtml;
            }
            // 名医工作室
            doc.getElementById('doctorWork').addEventListener('tap', function() {
                mui.openWindow({
                    url: 'doctorWork/doctorWorkDtl.html',
                    id: 'doctorWork/doctorWorkDtl.html'
                });
            });
            // 图文问诊
            doc.getElementById('photoDoctor').addEventListener('tap', function() {
                mui.openWindow({
                    url: 'photoDoctor/photoDoctor.html',
                    id: 'photoDoctor/photoDoctor.html'
                });
            });
            // 语音问诊
            doc.getElementById('vocalDoctor').addEventListener('tap', function() {
                mui.openWindow({
                    url: 'vocalDoctor/vocalDoctor.html',
                    id: 'vocalDoctor/vocalDoctor.html'
                });
            });
            // 微课堂
            doc.getElementById('littleClass').addEventListener('tap', function() {
                mui.openWindow({
                    url: 'littleClass/littleClass.html',
                    id: 'littleClass/littleClass.html'
                });
            });
            // echar
            var getOption = function(chartType) {
                var chartOption = chartType == 'pie' ? {
                    calculable: false,
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        data: [{
                            value: 2,
                            name: '额骨骨折(2)'
                        }, {
                            value: 3,
                            name: '腰部慢性劳损(3)'
                        }, {
                            value: 8,
                            name: '骨折(8)'
                        }]
                    }]
                } : {
                    legend: {
                        data: ['访问量']
                    },
                    grid: {
                        x: 35,
                        x2: 10,
                        y: 30,
                        y2: 25
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    calculable: false,
                    xAxis: [{
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }],
                    yAxis: [{
                        type: 'value',
                        splitArea: {
                            show: true
                        }
                    }],
                    series: [{
                        name: '蒸发量',
                        type: chartType,
                        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 6, 11]
                    }]
                };
                return chartOption;
            };
            var byId = function(id) {
                return doc.getElementById(id);
            };
            var lineChart = echarts.init(byId('lineChart'));
            lineChart.setOption(getOption('line'));
            var pieChart = echarts.init(byId('pieChart'));
            pieChart.setOption(getOption('pie'));
        </script>
    </body>
</html>